// 引入顶部组件
import NavTop from "../components/navtop"
import Banner from "../components/banner"
import { Empty } from 'react-vant';
import { Tabs } from 'antd-mobile'
import '../assets/css/cart.css'
import { SwipeCell, Flex, Button, Image, Typography } from 'react-vant';
import { Stepper } from 'react-vant';
import { Radio, } from 'antd-mobile'
import { SubmitBar, Checkbox } from 'react-vant';
import { useNavigate } from 'react-router-dom'

import { cartlist, cartdelete } from '../request/app'
import { useState, useEffect } from 'react'

function Cart() {

    const [cartlist1, setcart1] = useState([])
    const [cartlist2, setcart2] = useState([])
    const [flag, setflag] = useState()
    const [allmoney,setmoney] =useState(0)
    const Navigate = useNavigate()

    useEffect(() => {
        cartlist({
            uid: JSON.parse(sessionStorage.getItem('userInfo')).uid,
            // uid: '1976c800-727f-11eb-be60-972b7972e9e3',
        }).then(res => {

            if (res.list[0].content == null) {
                setcart1(['0'])
            } else {
                setcart1([...res.list[0].content])
            }
            if (res.list[1].content == null) {
                setcart2(['0'])
            } else {
                setcart2([...res.list[1].content])
            }
        })


    }, [])


    function dell(id) {
        console.log('删除事件');
        console.log(id);
        cartdelete({
            id
        }).then(res => {
            console.log(res);
            window.location.reload()
        })
    }
    function Check(val) {
        setflag(val)
        let arr = cartlist2
        arr.map((item, index) =>
            arr[index] = {
                ...item,
                tag: val
            }
        )
        setcart2([...arr])
    }

    function chang(val, i) {
        // console.log(i);
        let shop = {
            ...cartlist2[i],
            tag: val
        }
        let newArr = cartlist2
        newArr[i] = shop
        setcart2([...newArr])
        // console.log(cartlist2);
        let xxx = cartlist2.every(item=>item.tag==true)     
        setflag(xxx)                         
    }    
    useEffect(()=>{
        setmoney(0)
        let qian =0
        cartlist2.map((item)=>{
            if(item.tag){
                qian+=item.num*item.price
                setmoney(qian*100)
            }
        })
        console.log(allmoney);
    })

    function toorder(){
        Navigate('/order')
    }


    return (
        <div>
            <NavTop title='购物车'></NavTop>
            <Tabs>
                <Tabs.Tab title='全部' key='d' />
                <Tabs.Tab title='降价' key='c' />
                <Tabs.Tab title='常卖' key='b' />
                <Tabs.Tab title='分类' key='a' />
            </Tabs>
            <Banner title='小U自营'></Banner>
            {

                cartlist1.map(item => {
                    if (item == '0') {
                        return <Empty description="空空如也" />;
                    } else {
                        return (
                            <SwipeCell className="shop-box"
                                rightAction={
                                    <Button style={{ height: '100%' }} square type="danger" >
                                        删除
                                    </Button>
                                }>
                                <Flex className="demo-product-card" align="stretch">
                                    <Radio className="radio" checked={item.tag}></Radio>
                                    <Image src={item.img} className="demo-product-card__img im" />
                                    <Flex direction="column" justify="between" className="demo-product-card__content">
                                        <div>
                                            <Typography.Title level={5} className='ti'>{item.goodsname}</Typography.Title>
                                            {/* <Typography.Text type="secondary">这里是商品描述</Typography.Text> */}
                                        </div>
                                        <Flex justify="between" align="center">
                                            <Typography.Text strong size="lg">
                                                ¥{item.price}
                                            </Typography.Text>
                                            <Typography.Text size="sm" type="secondary">
                                                <Stepper
                                                    value={item.num}
                                                    buttonSize="32"
                                                    disableInput
                                                />
                                            </Typography.Text>
                                        </Flex>
                                    </Flex>
                                </Flex>
                            </SwipeCell>
                        )
                    }




                })
            }



            <Banner title='品牌精选'></Banner>
            <div className="btt">
                {
                    cartlist2.map((item, i) => {
                        if (item == '0') {
                            return <Empty description="空空如也" />;
                        } else {
                            return (
                                <SwipeCell className="shop-box"
                                    rightAction={
                                        <Button style={{ height: '100%' }} square type="danger" onClick={() => dell(item.id)}>
                                            删除
                                        </Button>
                                    }>
                                    <Flex className="demo-product-card" align="stretch">
                                        <Radio className="radio" checked={item.tag} onChange={(val) => chang(val, i)}></Radio>
                                        <Image src={item.img} className="demo-product-card__img" />
                                        <Flex direction="column" justify="between" className="demo-product-card__content">
                                            <div>
                                                <Typography.Title level={5} className='ti' >{item.goodsname}</Typography.Title>
                                                {/* <Typography.Text type="secondary">这里是商品描述</Typography.Text> */}
                                            </div>
                                            <Flex justify="between" align="center">
                                                <Typography.Text strong size="lg">
                                                    ¥{item.price}
                                                </Typography.Text>
                                                <Typography.Text size="sm" type="secondary">
                                                    <Stepper
                                                        value={item.num}
                                                        buttonSize="32"
                                                        disableInput
                                                    />
                                                </Typography.Text>
                                            </Flex>
                                        </Flex>
                                    </Flex>
                                </SwipeCell>
                            )
                        }
                    })
                }
            </div>


            <SubmitBar className="tojiesuan"
                price={allmoney}
                buttonText="提交订单"
                onSubmit={toorder}
            >
                <Checkbox checked={flag} onChange={(val) => Check(val)}>全选</Checkbox>
            </SubmitBar>


        </div>
    )
}

export default Cart